<template>
  <a-card class="general-card">
    <template #title>检测</template>
    <a-spin :loading="loading" style="width: 100%">
      <a-table :data="renderData">
        <template #columns>
          <a-table-column title="版本号" data-index="contentNumber" />
          <a-table-column title="检测厂商" data-index="updateContent" />
          <a-table-column title="检测策略" data-index="status1" />
          <a-table-column title="检测得分" data-index="status2" />
          <a-table-column title="发起时间" data-index="status">
            <template #cell="{ record }">
              <p v-if="record.status === 0">
                <span class="circle" />
                <span>{{ $t("basicProfile.cell.auditing") }}</span>
              </p>
              <p v-if="record.status === 1">
                <span class="circle pass" />
                <span>{{ $t("basicProfile.cell.pass") }}</span>
              </p>
            </template>
          </a-table-column>
          <a-table-column title="完成时间" data-index="updateTime" />
          <a-table-column title="操作">
            <template #cell>
              <a-button type="text">下载</a-button>
              <a-button type="text">查看</a-button>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-spin>
  </a-card>
</template>

<script lang="ts" setup>
import { ref } from "vue"
import { queryOperationLog, operationLogRes } from "@/api/profile"
import useLoading from "@/hooks/loading"

const { loading, setLoading } = useLoading(true)
const renderData = ref<operationLogRes>([])
const fetchData = async () => {
  try {
    const { data } = await queryOperationLog()
    renderData.value = data
  } catch (err) {
    // you can report use errorHandler or other
  } finally {
    setLoading(false)
  }
}
fetchData()
</script>

<style scoped lang="less">
:deep(.arco-table-th) {
  &:last-child {
    .arco-table-th-item-title {
      margin-left: 16px;
    }
  }
}
</style>
